<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-11-18 18:44:30
 * @LastEditors: Andy
 * @LastEditTime: 2023-01-30 11:57:01
-->
<template>
  <el-scrollbar class="login-page" wrap-class="scrollbar-wrapper">
    <div class="lg-top">
      <div class="top-area">
        <img class="neu-logo" src="../../../common/assets/images/kangni_logo2.jpg" />
      </div>
      <div class="lg-left">
        <img src="../../../common/assets/images/loginImg.png" />
      </div>
      <div class="lg-right">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tab-card">
          <el-tab-pane label="密码登录" name="first"></el-tab-pane>
          <el-tab-pane label="验证码登录" name="second"></el-tab-pane>
        </el-tabs>
        <div class="login-content">
          <password-in v-show="activeName === 'first'" ref="passwordInCom" @handleLoginSucess="goHome" />
          <code-in v-show="activeName === 'second'" ref="codeInCom" @handleLoginSucess="goHome" />
        </div>
      </div>
      <div class="panel">
        <div class="panel-item">
          <div
            ><span class="number">{{ info.supplierCount }}</span
            ><span class="unit"> 家</span></div
          >
          <div class="name">供应商</div>
        </div>
        <div class="panel-item">
          <div
            ><span class="number">{{ transferAmount(info.purchaseYearAmount) }}</span
            ><span class="unit">{{ transferAmountUnit(info.purchaseYearAmount) }}</span>
          </div>
          <div class="name">年采购额</div>
        </div>
        <div class="panel-item">
          <div
            ><span class="number">{{ info.purchaseOrderCount }}</span
            ><span class="unit"> 个</span></div
          >
          <div class="name">订单数</div>
        </div>
        <div class="panel-item">
          <div
            ><span class="number">{{ transferAmount(info.purchaseAllAmount) }}</span
            ><span class="unit"> {{ transferAmountUnit(info.purchaseAllAmount) }}</span>
          </div>
          <div class="name">累计采购额</div>
        </div>
      </div>
    </div>

    <div class="notice-content">
      <el-row :gutter="60">
        <el-col :span="8"><notice-list title="采购寻源公告" type="2" :list="purchaseNoticeList" /></el-col>
        <el-col :span="8"><notice-list title="中标公告" type="3" :list="orderNoticeList" /></el-col>
        <el-col :span="8"><notice-list title="新闻公告" type="4" :list="newsNoticeList" /></el-col>
      </el-row>
    </div>
    <!-- 服务中心 -->
    <div class="server-center">
      <div class="title">服务中心</div>
      <div>
        <el-row :gutter="50">
          <el-col :span="6" v-for="item in fileList" :key="item.title">
            <div class="item">
              <img class="file-sign" :src="item.src" :alt="item.title" />
              <span class="file-title">{{ item.title }}</span>
              <div class="btn">阅读全文 + </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="footer">
      <!-- <img class="neu-logo" src="../../../common/assets/images/Neusiri-logo.png" /> -->
      <img class="neu-logo" src="../../../common/assets/images/kangni_logo2.jpg" />
      <div class="footer-info">
        <div>
          <div class="item">联系方式</div>
          <div class="txt">联系电话：024-83660499</div>
          <div class="txt">联系邮箱：contact@neusoft.com</div>
          <div class="txt">联系地址：上海市闽行区紫月路1000号</div>
        </div>
        <div>
          <div class="item">移动应用</div>
          <img class="qr-code" src="../../../common/assets/images/qrCode.png" />
        </div>
        <div>
          <div class="item">关注我们</div>
          <img class="qr-code" src="../../../common/assets/images/qrCode.png" />
        </div>
      </div>
      <div class="bottom">版权所有 © 南京康尼科技实业有限公司</div>
    </div>
  </el-scrollbar>
</template>
<script>
  import { mapActions } from 'pinia'
  import { pinias } from '@/common/pinia'
  import PasswordIn from '../components/passwordIn.vue'
  import CodeIn from '../components/codeIn.vue'
  import NoticeList from '../components/noticeList.vue'
  import { apiPostNoticePage, apiGostLoginPageCount } from '../api/index'
  import czscLogo from '../../../common/assets/images/czsc.png'
  import gysxzLogo from '../../../common/assets/images/gysxz.png'
  import gzhLogo from '../../../common/assets/images/gzh.png'
  import wtjdLogo from '../../../common/assets/images/wtjd.png'

  const { login } = pinias
  export default {
    name: 'Login',
    components: { PasswordIn, CodeIn, NoticeList },
    data() {
      return {
        loading: false,
        activeName: 'first',
        purchaseNoticeList: [],
        orderNoticeList: [],
        newsNoticeList: [],
        info: {
          purchaseAllAmount: 0,
          purchaseOrderCount: '0',
          purchaseYearAmount: 0,
          supplierCount: 0
        },
        fileList: [
          { title: '供应商平台操作手册', src: czscLogo },
          { title: '供应商须知', src: gysxzLogo },
          { title: '供应商企业社会责任告知函', src: gzhLogo },
          { title: '供应商门户常见问题解答', src: wtjdLogo }
        ]
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      ...mapActions(login, ['LoginIn']),
      handleClick(tab) {
        this.activeName = tab.name
      },
      goHome() {
        this.$router.push({ path: '/home' })
      },
      // 数量
      transferAmount(num) {
        let result = Number(num)
        if (Number(num) > 100000000) {
          result = (Number(num) / 100000000).toFixed(2)
        } else if (Number(num) > 10000) {
          result = (Number(num) / 10000).toFixed(2)
        }
        return result
      },
      // 单位
      transferAmountUnit(num) {
        let result = '元'
        if (Number(num) > 100000000) {
          result = '亿'
        } else if (Number(num) > 10000) {
          result = '万'
        }
        return result
      },

      getData() {
        const params = {
          pageNum: 1,
          pageSize: 5,
          data: {
            noticeType: ''
          }
        }
        // 采购寻源公告
        apiPostNoticePage({ ...params, data: { noticeType: '2' } }).then((res) => {
          this.purchaseNoticeList = res.data.list
        })
        // 中标公告
        apiPostNoticePage({ ...params, data: { noticeType: '3' } }).then((res) => {
          this.orderNoticeList = res.data.list
        })
        // 新闻公告
        apiPostNoticePage({ ...params, data: { noticeType: '4' } }).then((res) => {
          this.newsNoticeList = res.data.list
        })
        apiGostLoginPageCount().then((res) => {
          this.info = res.data
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-scrollbar__bar.is-horizontal {
    height: 0 !important;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  // .lg-right {
  //   .el-tabs {
  //     width: 314px;

  //     .el-tabs__nav {
  //       width: 100%;
  //     }

  //     .el-tabs__item {
  //       width: 50%;
  //       text-align: center;
  //     }

  //     .el-tabs__active-bar {
  //       width: 50% !important;
  //     }
  //   }
  // }

  // .login-content {
  //   margin-top: 40px;

  //   .el-form-item {
  //     margin-bottom: 20px;
  //   }
  // }
</style>
<style lang="scss" scoped>
  @import '../style/login';
</style>
